import React,{useState,useTransition,useId}from 'react'
import  {useDebounce} from  "ahooks"
import  List from  "../components/SearchSuggestions"

export default function UseDeferredValue() {
    const [isPending, startTransition] = useTransition();
    const [text, setText] = useState("喵爸");

    //  let   dtext =  useDeferredValue(text,{timeoutMs:2000});
    let  dtext  =useDebounce(text,{await:2000});
 
    const handleChange = (e) => {
        startTransition(()=>{
            setText(e.target.value);
        })

    };

    let id1  = useId();
    let  id2 = useId();
    return (
      <div className="App">
        {isPending?"正在请求数据":""}
        <input value={text} onChange={handleChange}/>
        <List text={dtext}/>
        {id1}
        <div>{id2}</div>
      </div>
    );
}
